<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <fsButton ref="button" plain size="default" :buttons="buttons" @clickHandler="buttonHandler"></fsButton>
      </div>
      <div class="right-panel">
        <ex-search ref="search" :searches="searches" @searchOk="searchHandler" default-code="logName" placeholder="请输入日志名称"></ex-search>
      </div>
    </el-header>
    <el-main class="nopadding">
      <el-container>
        <el-main class="nopadding">
          <ex-table id="oprlogTable" ref="table" :columns="columns" :url="this.$API.system.oprlog.list.url" :refs="this.$refs" search="search" @columnClick="columnClickHandler"></ex-table>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
  <view-dialog ref="viewDialog"/>
</template>

<script>
import viewDialog from './view'
import ExTable from "@/components/exTable/index.vue";
import ExSearch from "@/components/exSearch/index.vue";
import BaseTemplate from "@/utils/baseTemplate";

export default {
  name: '系统日志',
  components: {
    viewDialog,
    ExSearch,
    ExTable,
  },
  data() {
    return {
      buttons: [
        {name: this.$t('button.export'), icon: "el-icon-download", click: "export", permission: "export"},
      ],
      searches: [
        { type: "input", name: "日志名称", code: "logName", placeholder: "请输入日志名称", maxlength: 30, showLimit: true},
        { type: "input", name: "请求地址", code: "requestUrl", placeholder: "请输入请求地址", maxlength: 30, showLimit: true},
        { type: "input", name: "日志追踪ID", code: "traceId", placeholder: "请输入日志追踪ID", maxlength: 30, showLimit: true},
        { type: "input", name: "客户请求IP", code: "userIp", placeholder: "请输入客户请求IP", maxlength: 30, showLimit: true},
        { type: "datetimerange", name: "创建时间", code: "createTimeStart,createTimeEnd",startPlaceholder:"请输入开始日期", endPlaceholder: "请输入结束日期", format: "YYYY-MM-DD HH:mm:ss",valueFormat:"YYYYMMDDHHmmss"},

      ],
      columns: [
        {code: "logName", name: "日志名称", width: "",click: "show1" },
        {code: "requestUrl", name: "请求地址", width: ""},
        {code: "traceId", name: "日志追踪ID", width: "170"},
        {code: "userIp", name: "客户请求IP", width: "120"},
        {code: "useTime", name: "处理时间(s)", width: "80"},
        {code: "createUser", name: "操作人", width: "100", formatter: "DICT", key: "SysUser"},
        {code: "createTime", name: "操作时间", width: "175", formatter: "DATETIME"},
      ],
      parentLevelCode: null,
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    buttonHandler(index, name) {
      this.$options.methods[name](this, index);
    },
    async searchHandler() {
      let queryParams = {pathCode: this.parentLevelCode}
      await this.$refs.table.refresh(queryParams);
    },
    columnClickHandler(name,data){
      this.$options.methods[name](this, data);
    },
    //查看
    show(_this) {
      let row = _this.$refs.table.selectionOne();
      if (!row) {
        return;
      }

      _this.$nextTick(() => {
        _this.$refs.viewDialog.open(row);
      })
    },
    //查看
    async show1(_this,row) {
     var data={};
     data.id=row.id;
      //请求数据加载
      var res = await _this.$API.system.oprlog.findById.post({id:row.id});
      if (res.code === 2000) {
        row.requestInfo=res.data.requestInfo;
        row.responseInfo=res.data.responseInfo;
      }

      _this.$nextTick(() => {
        _this.$refs.viewDialog.open(row);
      })
    },
    //导出
    async export(_this,index) {
      let attachParams = {};
      let exportApi = _this.$API.system.oprlog.export;
      let exTableRef = _this.$refs.table;
      let exportBtnRef = _this.$refs.button;
      let exportBtnIndex = index;
      await BaseTemplate.export(_this, exportApi, attachParams, exportBtnRef, exportBtnIndex, exTableRef);
    },

  }
}
</script>
